<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #showCode{
            width: 50px;
            text-align: center;
            font-style: italic;
            background-color: #ddd;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>

    <input type="text" id="inp">
    <input type="text" id="showCode" disabled>
    <button id="refresh">刷新</button>
    <br> <br>
    <input id="btn2" type="button" value="确认">


    <script>

        // 分析：
        //   页面一打开的时候，就会显示这个随机验证码
        //   点击刷新时，验证码会更换


        // 问题：验证码要求必须同时拥有大写，小写和数字


        // 拿元素
        var oShowCode = getEle('showCode') ;
        var oInp = getEle('inp') ;
        var oRefresh = getEle('refresh') ;
        var oBtn2 = getEle('btn2') ;


        // 1 页面一打开的时候，就显示验证码

        oShowCode.value = code() ;


        // 2 实现刷新功能

        oRefresh.onclick = function() {
            // 重新产生一个验证码，然后再赋值给框里面
            oShowCode.value = code() ;
        }


        // 3 确认验证码输入是否正确

        oBtn2.onclick = function() {
            // 输入框的值和验证码是否相等
            if(oInp.value === oShowCode.value) {
                alert('ok') ;
            } else {
                alert('验证码输入错误') ;
                // 输入错误之后，需要清空并且刷新验证码
                oInp.value = '' ;
                // 重新产生一个验证码，然后再赋值给框里面
                oShowCode.value = code() ;
            }
        }




        function code(n) {

            // 默认产生4位验证码
            n = n || 4 ;

            var numArr = [0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9] ;

            var smallArr = ['a' , 'b' , 'c' , 'd' , 'e' , 'f'] ;

            var bigArr = ['A' , 'B' , 'C' , 'D' , 'E' , 'F'] ;

            var allArr = smallArr.concat(numArr , bigArr) ;

            var res = '' ;  // 验证码最终是一个字符串

            for(var i = 0 ; i < n ; i++) {
                res += allArr[rand(0 , allArr.length)] ;  // 取不到最大值
            }
            return res 
        }
        
        function rand(min , max) {
            return parseInt(Math.random() * (max - min)) + min ;
        } 


        function getEle(id) {
            return document.getElementById(id) ;
        }

    </script>
    
</body>
</html>